<script setup>
import { GetPlanningInstructionSelectAPI } from "@/api/system/auxiliarySettings/instructions";
import { GetDeviceDdlListAPI } from "@/api/device/maintenance/project.js";
// 子传父
const emit = defineEmits();
const { proxy } = getCurrentInstance();

const { maintenance_project_level, sys_project_type } = proxy.useDict(
  "maintenance_project_level",
  "sys_project_type"
);

// 父传子
const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
  //   传入数据 用于回显
  data: {
    type: Object,
    default: () => {},
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  //   传入数据 弹窗标题
  title: {
    type: String,
    default: "新增",
  },
});

/**
 * 计划指令下拉数据
 */
const instructionList = ref([]);

/**
 *
 */
const deviceNameLitst = ref([]);

/**
 * 表单字段
 */
const ruleForm = reactive({
  maintenanceProjectCode: "", // 项目编号
  maintenanceProjectName: "", // 项目名称
  maintenancePosition: "", // 维保部位
  maintenanceLevel: "1", // 维保级别
  maintenanceContent: "", // 维保内容
  remark: "", // 备注
});

/**
 * 表单校验
 */
const rules = reactive({
  projectType: [{ required: true, message: "请填写项目类型", trigger: "blur" }],
  maintenanceProjectName: [
    { required: true, message: "请填写项目名称", trigger: "blur" },
  ],
  deviceId: [{ required: true, message: "请填写设备名称", trigger: "blur" }],
  maintenancePosition: [
    { required: true, message: "请填写维保部位", trigger: "blur" },
  ],
  maintenanceLevel: [
    { required: true, message: "请选择维保级别", trigger: "change" },
  ],
  workingHour: [{ required: true, message: "请填写标准工时", trigger: "blur" }],
  maintenanceNum: [
    { required: true, message: "请填写维保数量", trigger: "blur" },
  ],

  paleInstruct: [
    { required: true, message: "请选择计划指令", trigger: "blur" },
  ],
  maintenanceContent: [
    { required: true, message: "请填写维保内容", trigger: "blur" },
  ],
});

/**
 * 提交方法
 */
const submit = async () => {
  const valid = await proxy.$refs.ruleFormRef.validate();
  if (!valid) return false;
  return ruleForm;
};

/**
 * 获取设备名称下拉
 */
const getDeviceName = async () => {
  try {
    const { data: res } = await GetDeviceDdlListAPI();
    res.map((t) => {
      t.label = t.deviceName;
      t.value = t.id;
    });
    deviceNameLitst.value = res;
  } catch (err) {
    console.log(err);
  }
};
getDeviceName();

/**
 * 选择设备名称
 */
const deviceChange = async (v) => {
  try {
    console.log("v", v);
    const val = deviceNameLitst.value.filter((t) => t.id == v);
    console.log(deviceNameLitst.value);
    ruleForm.deviceTypeDict = val[0]?.deviceType;
    ruleForm.deviceId = val[0]?.id;
    ruleForm.installationLocationName = val[0]?.installationLocationName;
  } catch (err) {
    console.log(err);
  }
};

/**
 *
 * 初始化数据
 */
const initData = async () => {
  if (props.data?.id) {
    Object.keys(props.data).forEach(
      (itemKey) => (ruleForm[itemKey] = props.data[itemKey])
    );
    if (props.title == "复制新增") {
      ruleForm.maintenanceProjectCode = "";
    }
    const { data: res } = await GetDeviceDdlListAPI();
    const val = res.filter((t) => t.id == ruleForm.deviceId);
    ruleForm.deviceTypeDict = val[0]?.deviceType;
    ruleForm.installationLocationName = val[0]?.installationLocationName;
  }
};

initData();

/**
 * 获取计划指令下拉数据
 */
const getPlanningInstructionSelect = async () => {
  const { data: result } = await GetPlanningInstructionSelectAPI();
  instructionList.value = result;
};
getPlanningInstructionSelect();

// 导出方法
defineExpose({ submit });
</script>
<template>
  <el-form
    inline
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="160px"
    class="demo-ruleForm"
    status-icon
  >
    <!-- v-if="props.title != '新增'" -->
    <el-row>
      <el-col :span="12" v-if="props.title != '新增'">
        <el-form-item label="项目编号" prop="maintenanceProjectCode">
          <el-input
            clearable
            disabled
            v-model="ruleForm.maintenanceProjectCode"
            placeholder=""
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="项目名称" prop="maintenanceProjectName">
          <el-input
            clearable
            :disabled="props.disabled"
            v-model="ruleForm.maintenanceProjectName"
            placeholder="请填写项目名称"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设备名称" prop="deviceId">
          <p-select
            :option="deviceNameLitst"
            :disabled="props.title == '修改'"
            v-model="ruleForm.deviceId"
            @change="deviceChange"
            placeholder="请选择设备名称"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设备位置">
          <el-input
            clearable
            disabled
            v-model="ruleForm.installationLocationName"
            placeholder=""
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设备型号">
          <el-input
            clearable
            disabled
            v-model="ruleForm.deviceTypeDict"
            placeholder=""
          />
        </el-form-item> </el-col
      ><el-col :span="12">
        <el-form-item label="项目类型" prop="projectType">
          <p-select
            :option="sys_project_type"
            :disabled="props.disabled"
            v-model="ruleForm.projectType"
            placeholder="请选择项目类型"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="保养部位">
          <el-input
            clearable
            :disabled="props.disabled"
            v-model="ruleForm.maintenancePosition"
            placeholder="请填写保养部位"
          />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="保养级别">
          <p-select
            :option="maintenance_project_level"
            :disabled="props.disabled"
            v-model="ruleForm.maintenanceLevel"
            placeholder="请选择保养级别"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="标准工时">
          <el-input-number
            clearable
            :min="0"
            :disabled="props.disabled"
            v-model="ruleForm.workingHour"
            placeholder="请填写标准工时"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="保养数量">
          <el-input
            clearable
            :disabled="props.disabled"
            v-model="ruleForm.maintenanceNum"
            placeholder="请填写保养数量"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="计划指令">
          <p-select
            multiple
            :option="instructionList"
            :disabled="props.disabled"
            v-model="ruleForm.paleInstruct"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="备件或耗材型号" prop="consumables">
          <el-input
            clearable
            :disabled="props.disabled"
            v-model="ruleForm.consumables"
            placeholder="请填写备件或耗材型号"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <div class="rk">
      <el-form-item label="保养内容">
        <el-input
          clearable
          :disabled="props.disabled"
          v-model="ruleForm.maintenanceContent"
          :rows="3"
          type="textarea"
          placeholder="请输入保养内容"
        />
      </el-form-item>
    </div>
    <div class="rk">
      <el-form-item label="备注">
        <el-input
          clearable
          :disabled="props.disabled"
          v-model="ruleForm.remark"
          :rows="3"
          type="textarea"
          placeholder="说点什么吧！"
        />
      </el-form-item>
    </div>
  </el-form>
</template>

<style lang="scss" scoped>
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
</style>
